<template>
  <div class="hot">
    <div class="hot-chart" ref="hot_chart"></div>
    <span class="iconfont arr-left" :style="comStyle" @click="toLeft">&#xe6ef;</span>
    <span class="iconfont arr-right" :style="comStyle"  @click="toRight">&#xe6ed;</span>
    <span class="title-name" :style="comStyle" >{{title_name}}</span>
  </div>
</template>

<script>
  export default {
    name: "Hot",
    data() {
      return {
        chartInstance: null,
        allData: null,
        currentIndex: 0,
        titleFontSize: 0
      }
    },
    created() {
      this.$socket.registerCallback("hotData", this.getData)
    },
    computed: {
      title_name() {
        if (!this.allData) {
          return ''
        } else {
          return this.allData[this.currentIndex].name
        }
      },
      comStyle() {
        return {
          fontSize: this.titleFontSize + 'px'
        }
      }
    },
    mounted() {
      this.initChart()
      // this.getData()
      this.$socket.send({
        action: 'getData',
        socketType: 'hotData',
        chartName: 'hotproduct',
        value: ''
      })
      window.addEventListener('resize', this.screenAdapter)
      this.screenAdapter()
    },
    destroyed() {
      window.removeEventListener('resize', this.screenAdapter)
      this.$socket.unRegisterCallback("hotData")
    },
    methods: {
      initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.hot_chart, 'chalk')
        const initOption = {
          title: {
            text: '▍热销商品的占比',
            left: 20,
            top: 20
          },
          legend: {
            top: '15%',
            icon: 'circle'
          },
          tooltip: {
            show: true,
            formatter: (arg) => {
              const data = arg.data.children
              let total = 0
              data.forEach(item => total += item.value)
              let str = ''
              data.forEach(item => {
                str += `${item.name}: ${parseInt(item.value / total * 100)}% <br />`
              })
              return str
            }
          },
          series: [
            {
              type: 'pie',
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true
                },
                labelLine: {
                  show: false
                }
              }
            }
          ]
        }
        this.chartInstance.setOption(initOption)
      },
      getData(ret) {
        // const {data: ret} = await this.$http.get('/hotproduct')
        this.allData = ret
        this.updateChart()
      },
      updateChart() {
        const legendArr = this.allData[this.currentIndex].children.map(item => item.name)
        const seriesArr = this.allData[this.currentIndex].children.map(item => {
          return {
            name: item.name,
            value: item.value,
            children: item.children
          }
        })
        const dataOption = {
          legend: {
            data: legendArr
          },
          series: [
            {
              data: seriesArr
            }
          ]
        }
        this.chartInstance.setOption(dataOption)
      },
      screenAdapter() {
        this.titleFontSize = this.$refs.hot_chart.offsetWidth / 100 * 3.6
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: this.titleFontSize
            }
          },
          legend: {
            // itemWidth: this.titleFontSize / 2,
            // itemHeight: this.titleFontSize / 2,
            itemWidth: this.titleFontSize,
            itemHeight: this.titleFontSize,
            itemGap: this.titleFontSize / 2,
            textStyle: {
              fontSize: this.titleFontSize / 2
            }
          },
          series: [
            {
              radius: this.titleFontSize * 4.5,
              center: ['50%', '60%']
            }
          ]
        }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      },
      toLeft() {
        this.currentIndex--
        if (this.currentIndex < 0) {
          this.currentIndex = this.allData.length - 1
        }
        this.updateChart()
      },
      toRight() {
        this.currentIndex++
        if (this.currentIndex > this.allData.length - 1) {
          this.currentIndex = 0
        }
        this.updateChart()
      }
    }
  }
</script>

<style lang="less" scoped>
  .arr-left {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
  }

  .arr-right {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
  }

  .title-name {
    position: absolute;
    left: 80%;
    bottom: 20px;
    color: white;
  }
</style>